<style>
  .card{
    margin: 12px 0;
    text-align: left;
  }
  .has-hover{
    color: black;
  }
  a.has-hover :hover{
    color: #2d8cf0;
  }
  .fixedCard{
    border-radius: 4px;
    font-size: 14px;
    position: fixed;
    transition: all .2s ease-in-out;
    width: 22%;
    text-align: left;
  }
  .card-section{
    text-align: left;
  }
  .card-h4{
    margin-bottom: 10px;
  }
  .card-p{
    text-align: justify;
  }
  .card-img{
    width: 80px;
    height: 60px;
  }
  .card-foot-art{
    color: #515a6e;
  }
</style>
<template>
  <div>
  <Row style="padding:10px">
    <Col span="15">
      <Card :bordered="false" class="card" v-for="item in articleList" :key="item.index" dis-hover>
        <section slot="title" class="card-section">
          <span slot="prepend">
             <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg" alt="" style="width: 24px;height: 24px;line-height: 24px;border-radius: 12px;">
          </span>
          <span style="color:#ef4868;margin-left: 3px;">
           EvelynHU
          </span>
          <span style="font-size: 10px;color:darkgrey;">04-29 09:45</span>
          <span class="ivu-tag ivu-tag-green ivu-tag-checked" style="float: right;">置顶</span>
        </section>
        <div>
          <a href="/#/art/detail" class="has-hover"><h4 class="card-h4">锦瑟</h4></a>
          <Row>
            <Col span="17">
            <a href="/#/art/detail" style="color: black;">
              <p class="card-p">这是文章内容：锦瑟无端五十弦，一弦一柱思华年。庄生晓梦迷蝴蝶，望帝春心托杜鹃。沧海月明珠有泪，蓝田日暖玉生烟。此情可待成追忆，只是当时已惘然。</p>
            </a>
            </Col>
            <Col span="6" offset="1">
            <img src="../../assets/img/laison.png" alt="" class="card-img"/>
            </Col>
          </Row>
        </div>
        <div class="ivu-tag ivu-tag-default ivu-tag-border ivu-tag-checked card-foot-art" v-for="item in articleList" :key="item.index">
          <span>这是个底部标签</span>
        </div>
      </Card>
    </Col>
    <Col span="8" offset="1">
      <div class="fixedCard">
        <Card title="选项" icon="ios-options" :padding="2" dis-hover>
          <CellGroup>
            <Cell title="Only show titles" />
            <Cell title="Disabled" disabled />
            <Cell title="Selected" selected />
            <Cell title="With Badge" to="/components/badge">
              <Badge :count="10" slot="extra" />
            </Cell>
          </CellGroup>
        </Card>
        <Card :padding="0" shadow dis-hover style="margin-top: 10px;">
          <i-button type="primary" style="width: 100%;" to="/art/write"><Icon type="ios-create-outline" size="20"/>写文章</i-button>
        </Card>
      </div>
    </Col>
  </Row>

  </div>
</template>

<script>
  let Base64 = require('js-base64').Base64;
  export default {
    name: 'article-index',
    data () {
      return {
        articleList:[
          {
            index:1
          },
          {
            index:2
          },
          {
            index:3
          },
          {
            index:4
          },
          {
            index:5
          }
        ]
      };
    },
    methods: {
      init () {

      }
    },
    mounted () {
      this.init();
    }
  };
</script>
